<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h2>管理员页面</h2>
      <el-divider></el-divider>
      <el-form
        ref="adminsSearchForm"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
      >
        <el-form-item prop="aname">
          <el-input
          size="small"
            v-model.trim="searchForm.aname"
            clearable
            placeholder="管理员名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="aaccount">
          <el-input
          size="small"
            v-model.trim="searchForm.aaccount"
            clearable
            placeholder="管理员账号"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item prop="role">
          <el-input
            v-model.trim="searchForm.role"
            clearable
            placeholder="角色权限"
          ></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
          <el-button type="default" @click="onReset" size="small">重置</el-button>
          <el-button type="success" @click="toAdd" size="small">添加</el-button>
          <el-button type="danger" @click="delBatch" size="small">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" sortable label="序号"> </el-table-column>
      <el-table-column prop="aname" label="管理员名"> </el-table-column>
      <el-table-column prop="aaccount" label="管理员账号"> </el-table-column>
      <!-- <el-table-column prop="role" label="角色权限"> </el-table-column> -->
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="success" size="small"
            >编辑</el-button
          >
          <el-button @click="handleDel(scope.row)" type="danger" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-divider> </el-divider>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pager.pageNum"
      :page-sizes="pager.options"
      :page-size="pager.pageSize"
      layout="total, prev, pager, next, jumper, sizes"
      :total="pager.count"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import adminsApi from '@/http/adminsApi';
export default {
  created() {
    //http请求
    this.getList();
  },
  data() {
    return {
      searchForm: {},
      tableData: [],
      batchIds: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    getList() {
      adminsApi
      .getByPage({
          ...this.searchForm,
          pageNum: this.pager.pageNum,
          pageSize: this.pager.pageSize,
        })
        .then(res => {
          console.log(res);
          console.log(this.pager);
          if (res.data.code == 200) {
            this.pager = res.data.data;
            this.tableData = this.pager.data;
          }
        });
    },
    toAdd() {
      this.$router.push('/account/admins/toAdd.html');
    },
    onSubmit() {
      this.getList();
    },
    onReset() {
      this.$refs['adminsSearchForm'].resetFields();
    },
    delBatch() {
      if (this.batchIds.length == 0) {
        this.$message.warning('请勾选要删除的数据！');
        return;
      }
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          adminsApi.delBatch(this.batchIds).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      this.batchIds = [];
      val.forEach(item => this.batchIds.push(item.id));
    },
    handleDel(row) {
      console.log(row);
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          adminsApi.delBatch(row.id).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    handleEdit(row) {
      console.log(row);
      this.$router.push(`/account/admins/toEdit/${row.id}.html`);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pager.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pager.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style>
.el-pagination {
  text-align: center;
}
</style>
